<template>
  <div style="margin-top: 20px;margin-left: 20px;margin-right: 20px">
    <el-row>
      <el-row>
        <el-button @click="getList(0)" type="primary">分散式</el-button>
        <el-button @click="getList(1)" type="primary">集中式</el-button>
      </el-row>
      <el-row>
        <el-form :inline="true" :model="formRoom" class="demo-form-inline">
          <el-form-item label="省市县" prop="cityList">
            <el-cascader
              v-model="formRoom.cityList"
              :options="options"
              clearable
              :props="{label:'regionName',value:'regionId'}"
              @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formRoom.preName" placeholder="搜索:小区名,公寓名,房间号,租客名"></el-input>
          </el-form-item>
          <el-form-item>
            <template>
              <el-button type="primary" @click="search">搜索</el-button>
            </template>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="one">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="租房分期" name="two">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="租约保理" name="three">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="空闲可租" name="four">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="欠费提醒" name="five">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="收费提醒" name="six">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="合同快到期" name="seven">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="合同已到期" name="eight">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="装修维护" name="nine">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  import { getList,updatePublishStatus } from "@/api/house/fangtai";
  import {getCity} from "@/api/system/business";
  export default {
    name: "fangtai",
    data(){
      return{
        activeName:'one',
        value:[],
        roomList:[],
        hostType:0,
        options:[],
        data:[],
        totalPage: [],
        formRoom:{
          pageNum:1,
          pageSize:10,
          hostType:0,
          preName:'',
        },
        currentPage:0,
        dialogVisible:false,
      }
    },
    methods:{
      handleClick(tab, event) {
        console.log("tab:::",tab, event);
        if(tab._data.index==1){
          this.formRoom.fangtaiType=4;
          this.getList(this.hostType);
        }else if(tab._data.index==2){
          this.formRoom.fangtaiType=3;
          this.getList(this.hostType);
        }else if(tab._data.index==3){
          this.formRoom.fangtaiType=1;
          this.getList(this.hostType);
        }else if(tab._data.index==4){
          this.formRoom.fangtaiType=6;
          this.getList(this.hostType);
        }else if(tab._data.index==5){
          this.formRoom.fangtaiType=5;
          this.getList(this.hostType);
        }else if(tab._data.index==6){
          this.formRoom.fangtaiType=7;
          this.getList(this.hostType);
        }else if(tab._data.index==7){
          this.formRoom.fangtaiType=8;
          this.getList(this.hostType);
        }else if(tab._data.index==8){
          this.formRoom.fangtaiType=2;
          this.getList(this.hostType);
        }

      },
      getList(hostType){
        this.hostType=hostType;
        this.formRoom.hostType=hostType;
        getList(this.formRoom).then(response=>{
          this.data=response.rows;
          if(this.data!=null){
            this.formRoom.pageNum = Math.ceil(this.data.length / this.formRoom.pageSize) || 1;
            for (let i = 0; i < this.formRoom.pageNum; i++) {
              // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
              // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
              this.totalPage[i] = this.data.slice(this.formRoom.pageSize * i, this.formRoom.pageSize * (i + 1))
            }
            // 获取到数据后显示第一页内容
            this.roomList = this.totalPage[this.currentPage];
            console.log("房态图数据::",response.rows);
          }else {
            this.roomList=null;
          }

        })
      },
      nextPage() {
        if (this.currentPage === this.pageNum - 1) return ;
        this.roomList = this.totalPage[++this.currentPage];
      },
      // 上一页
      prePage() {
        if (this.currentPage === 0) return ;
        this.roomList = this.totalPage[--this.currentPage];
      },
      openTags(){
        this.dialogVisible=true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleChange(value) {
        this.formRoom.province=value[0];
        this.formRoom.city=value[1];
        this.formRoom.county=value[2];
        this.value=value;
        console.log(value);
      },
      search(){
        this.formRoom.pageNum=1;
        this.getList(this.hostType);
      },
      getCityList(){
        getCity().then(response=>{
          console.log(response);
          this.options=response;
        })
      },
      updatePublish(publish,houseId){
        if(publish==1){
          if(confirm("确定要发布房产吗?")){
            this.updatePublishStatus(publish,houseId);
          }
        }else{
          if(confirm("确定要取消发布房产吗？")){
            this.updatePublishStatus(publish,houseId);
          }
        }
      },
      updatePublishStatus(publish,houseId){
        this.formRoom.publishStatus=publish;
        this.formRoom.houseId=houseId;
        updatePublishStatus(this.formRoom).then(response=>{
          if(response.code==200){
            this.$message.success("操作成功");
            this.getList(this.hostType);
          }
        })
      },
      del(houseId){
        if(confirm("您确定要删除吗?")){
          this.formRoom.houseId=houseId;
          console.log("删除时::",this.formRoom);
          updatePublishStatus(this.formRoom).then(response=>{
            if(response.code==200){
              this.$message.success("操作成功");
              this.getList(this.hostType);
            }
          })
        }
      }
    },
    created() {
      this.getList(0);
      this.getCityList();
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 150px;
  }
</style>
